// 这个文件用于定义路由对象
import Vue from 'vue'
import VueRouter from 'vue-router'

// 普通引入组件
// 这样的引入方式,所有的组件,再项目启动的时候就会全部加载到内存中
// import Home from '../pages/Home'
// import About from '../pages/About'

// 路由组件的懒加载
const Home = () => import('../pages/Home')
const About = () => import('../pages/About')
const Test1 = () => import('../pages/Test1')
const Test2 = () => import('../pages/Test2')
const Login = () => import('../pages/Login')

// 使用插件VueRouter
Vue.use(VueRouter)
const router = new VueRouter({
  // 两种模式: 'history'和'hash'.默认是hash
  mode: 'hash',
  // 路由表
  routes: [
    // 注意: 一级路由不能忽略/
    {
      meta: { title: '首页' },
      path: '/home',
      component: Home,
      name: 'h',
      children: [
        {
          //   path: '/home/test1', //允许写完整写法
          path: 'test1', //也允许简写,注意:/都不要写
          component: Test1,
          name: 't1', // 给Test1路由起了别名叫t1
          meta: { title: '测试1' },
        },
        {
          //   path: '/home/test2',
          path: 'test2',
          component: Test2,
          name: 't2',
          meta: { title: '测试2' },
        },
        // 下面配置的路由对象的作用: 当路径为/home时,默认展示home里面的test1页面
        {
          path: '/', // 这个/代表是/home
          redirect: 'test1', // 这里的test1其实是简写 --> /home/test1
        },
      ],
    },
    {
      // 在About页面对应的路由对象中写一个meta属性,meta中写isAuth值为true,表示我们希望对About页面做权限管理(没有登录不能访问)
      meta: {
        isAuth: true,
        title: '关于',
      },
      // path: '/about/:xxx/:yyy', //定义路由参数.此时xxx和yyy都是必填的路由参数
      path: '/about/:xxx?/:yyy?', //定义路由参数.此时xxx和yyy都是可选的路由参数
      component: About,
      name: 'ab',
      // props: { aaa: 999 }, //传递的props数据,都是以props的形式接收
      // props: true, // 将已经传递的路由参数,以props的形式接收
      props($route) {
        return {
          xxx: $route.params.xxx,
          yyy: $route.params.yyy,
          name: $route.query.name,
          age: $route.query.age,
          arr: [1, 2, 3],
        }
      },
      // 独享路由守卫: 进入到当前路由组件之前触发(注意: 独享路由守卫只有这一个)
      // beforeEnter(to, from, next) {
      //   // localStorage.getItem('token') ? next() : next('/login')
      //   localStorage.getItem('token') ? next() : router.push('/login')
      // },
    },
    {
      path: '/',
      redirect: '/home', // 当路径是/时,则重定向到/home
    },
    {
      path: '/login',
      component: Login,
    },
  ],
})

// 全局前置路由守卫
// router.beforeEach((to, from, next) => {
//   // to 是目标路由对象
//   // from 是起始路由对象
//   // next 调用,才会展示目标页面
//   // console.log('只要页面跳转,这个函数就会触发', to, from)

//   // 判断当前目标路由对象是否需要进行权限管理
//   // console.log(to)
//   if (to.meta.isAuth) {
//     // 说明要做权限管理
//     // 判断当前用户是否登录,登录则可以访问About,否则回到登录页面
//     // if (localStorage.getItem('token')) {
//     //   // 说明登录了
//     //   next() // next不传路径,则进入到目标路由页面
//     // } else {
//     //   next('/login') //next传入了一个路径,则进入到指定路径的页面
//     //   return
//     // }
//     next(localStorage.getItem('token') ? undefined : '/login')
//   }
//   next()
// })

// 全局后置路由守卫
// router.afterEach((to, from) => {
//   // console.log('后置', to, from)
//   // to 还是目标路由对象
//   // from 还是起始路由对象
//   // 这个函数是在已经进入到目标页面之后执行
//   document.title = to.meta.title
// })

export default router
